<template>
	<view class="man-index">
		<view class="man-header">
			<view class="man-tab">
				<zzx-tabs :items="items" :current="current" @clickItem="onClickItem" ref="mytabs" :defaultColor='defaultColor'
				 :activeColor="activeColor">
				</zzx-tabs>
			</view>
			<view class="man-but" @tap="show">个人中心</view>
		</view>
		<view style="margin-top: 120upx;">
			<view class="man-wrapper" v-for="(item,index) in riderOrderList" :key="index" @click.stop="hanldOrderInfo(item.id)">
				<view style="margin: 0 15px;">
					<view class="man-item" @click.stop="navigation(item)">
						<view class="item-header">
							<view class="item-add">地址：{{item.province_text}}{{item.city_text}}{{item.area_text}}{{item.street_text}}{{item.address}}</view>
						</view>
						<view class="item-right">
							<image src='/static/img/daohang.png'></image>
							<view class="right-text">导航</view>
						</view>
					</view>
					<view class="weight">
						<view class="weight-item" v-for="(itm,idx) in item.orderlog" :key="idx">
							<view class="weight-item-img">
								<image :src="itm.icon || '/static/img/daohang.png'" />
							</view>
							<view>
								<view class="weight-text">{{itm.name}}</view>
								<view class="weight-gj">{{itm.ordertype}}</view>
							</view>
						</view>
					</view>
					<view class="weight-tiem">预约时间 ：{{item.appointment}}</view>
					<view class="weight-tiem">合计费用：<text style="color: #FF6001;"><text style="font-size: 14px;">≈¥</text>{{item.total}}</text></view>
				</view>
				<view v-if="current == 0" class="weight-but" @tap.stop="open(item.id)">接单</view>
				<view v-if="current == 1" class="but-wrapper">
					<view class="but-con" v-if="item.mobile" @click.stop="contactBuyer(item)">
						<image src="/static/img/tel.png"></image>
						<view class="con-text">联系卖家</view>
					</view>
					<view class="but-con" style="width: 180upx;" @click.stop="open2(item.id)">
						<view class="con-text">转单</view>
					</view>
					<view class="but-ok" @click.stop="hanldOrderInfo(item.id)">
						<view class="ok-text">确认取货</view>
					</view>
				</view>
				<view v-if="current == 2" class="but-wrapper" style="justify-content:center">
					<view class="weight-tiem">实际支付金额：<text style="color: #FF6001;">¥{{item.total}}</text></view>
				</view>
			</view>

			<view v-if="loadAll&&riderOrderList.length>=10" class="no-more-data">没有更多了</view>
			<view v-if="riderOrderList.length == 0" class="no-more-data">
				暂无数据
			</view>
		</view>

		<!--个人中心-->
		<popup-layer ref="popupRef" :direction="'left'" class="pop-body">
			<view class="box">
				<view class="box-header">
					<image src='/static/img/girl.png' class="box-img"></image>
					<view class="box-user">
						<view class="user-name">{{riderInfo.name}}</view>
						<view class="user-num">{{riderInfo.mobile}}</view>
					</view>
				</view>
				<view class="box-stus">
					<view class="stus-item" @click="changeStatus(1)">
						<image src="/static/img/dui.png" v-if="riderInfo.status != 1"></image>
						<image src="/static/img/shangx.png" v-if="riderInfo.status == 1"></image>
						<view class="stus-text">上线</view>
					</view>
					<view class="stus-item" @click="changeStatus(2)">
						<image src="/static/img/no_manglv.png" v-if="riderInfo.status != 2"></image>
						<image src="/static/img/manglv.png" v-if="riderInfo.status == 2"></image>
						<view class="stus-text">忙碌</view>
					</view>
					<view class="stus-item" @click="changeStatus(3)">
						<image src="/static/img/no_xiax.png" v-if="riderInfo.status != 3"></image>
						<image src="/static/img/xiax.png" v-if="riderInfo.status == 3"></image>
						<view class="stus-text">下线</view>
					</view>
				</view>
				<view class="box-list">
					<view class="list-item" @click="hanldRow()">
						<view class="list-item-text">街道管理</view>
						<image src="/static/img/right_icon.png" class="list-item-img"></image>
					</view>
					<view class="list-item" @click="hanldStats()">
						<view class="list-item-text">我的统计</view>
						<image src="/static/img/right_icon.png" class="list-item-img"></image>
					</view>
					<view class="list-item" @click="hanldCenter()">
						<view class="list-item-text">通知中心</view>
						<image src="/static/img/right_icon.png" class="list-item-img"></image>
					</view>
					<view class="list-item" @click="hanldsetCenter()">
						<view class="list-item-text">设置中心</view>
						<image src="/static/img/right_icon.png" class="list-item-img"></image>
					</view>
					<view class="list-item" @click="hanldStudy()">
						<view class="list-item-text">在线学习</view>
						<image src="/static/img/right_icon.png" class="list-item-img"></image>
					</view>
					<!-- <view class="list-item">
						<view class="list-item-text">我的统计</view>
						<image src="/static/img/right_icon.png" class="list-item-img"></image>
					</view> -->
					<view class="list-item" @click="hanldIdea()">
						<view class="list-item-text">意见反馈</view>
						<image src="/static/img/right_icon.png" class="list-item-img"></image>
					</view>
					<view class="list-item" @click="hanldRule()">
						<view class="list-item-text">协议与规则</view>
						<image src="/static/img/right_icon.png" class="list-item-img"></image>
					</view>
				</view>
			</view>
		</popup-layer>

		<!--接单-->
		<uni-popup ref="recash" type="center" style="z-index: 999;">
			<view class="cash">
				<!-- <image src="/static/img/dingdan.png" class="cash-img"></image> -->
				<view class="cash-title">确认接单</view>
				<view class="cash-but" @click="confirmOrder" style="margin-top: 20px;">
					<view class="cash-left">确认</view>
				</view>
				<image @click="closeRecash" src="/static/img/guanbi_icon.png" class="cash-guan"></image>
			</view>
		</uni-popup>

		<!--转单-->
		<uni-popup ref="recash2" type="bottom" style="z-index:999;">
			<view class="cash2">

				<view class="cash2-input">
					<input type="number" v-model="keywordTel" placeholder="请输入骑手的电话号码" />
					<view class="cash2-but" @click="searchRider">搜索</view>
				</view>

				<view class="cash2-body">
					<view>
						<radio-group @change="radioChange" class="cash2-wrapper" v-for="(item, index) in riderMobileList" :key="index">
							<view class="cash2-text">{{item.mobile}}</view>
							<label class="cash2-lab">
								<view class="cash2-name">{{item.name}}</view>
								<view>
									<radio :value="item.id+''" :checked="item.id == currentId" :color="color" style="transform:scale(0.8)" />
								</view>
							</label>
						</radio-group>

					</view>


				</view>
				<view class="cash-but3">
					<view class="but-left3" @click="cancelTransfer">
						取消
					</view>
					<view class="but-right3" @click="confirmTransfer">
						确定转单
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import zzxTabs from "@/components/zzx-tabs/zzx-tabs.vue"

	//
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'

	//
	import popupLayer from '@/components/popup-layer/popup-layer.vue';
	export default {
		data() {
			return {
				items: ['新任务', '待取货', '已完成'],
				current: 0,
				defaultColor: '#000000',
				activeColor: '#FF6001',
				color: '#FF6001',
				items1: [{
						value: 'USA',
						name: '美国'
					},
					{
						value: 'CHN',
						name: '中国',
						checked: 'true'
					}
				],
				currentId: '',

				loadAll: false,
				page: 1,
				riderOrderList: [],
				riderInfo: {},
				orderId: '',
				keywordTel: '',
				riderMobileList: [],
			}
		},
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
			popupLayer
		},
		onShow() {
			this.loadAll = false;
			this.riderOrderList = [];
			this.page = 1;
			this.getRiderOrderList()
			this.getRiderInfo()
		},
		onPullDownRefresh() {
			// console.log('下拉刷新')
			this.loadAll = false;
			this.riderOrderList = [];
			this.page = 1;
			this.getRiderOrderList();
		},
		onReachBottom() {
			console.log('上拉加载')
			if (!this.loadAll) {
				this.getRiderOrderList();
			}
		},
		methods: {
			//骑手信息
			getRiderInfo() {
				this.$http.getinfo().then(res => {
					console.log(res)
					this.riderInfo = res.data
				})
			},
			closeNotice() {
				this.$refs.notice.close()
			},
			//搜索骑手准备转单
			searchRider() {
				if (!this.keywordTel) {
					uni.showToast({
						title: '请输入骑手电话号码',
						icon: 'none'
					})
					return
				}
				this.$http.serrider({
					mobile: this.keywordTel
				}).then(res => {
					console.log(res)
					if (res.code == 0) {
						if (res.data.data && res.data.data.length > 0) {
							this.riderMobileList = res.data.data
							this.currentId = res.data.data[0].id
						}
					}
				})
			},
			//联系买家
			contactBuyer(item) {
				if (item.mobile) {
					uni.makePhoneCall({
						// 手机号
						phoneNumber: item.mobile,
					});
				}
			},
			//确认取货
			confirm(item) {
				uni.navigateTo({
					url: '/pages/member/horseman/confirmReceipt?detail=' + JSON.stringify(item)
				})
			},
			//确认转单
			confirmTransfer() {
				if (!this.currentId) {
					uni.showToast({
						title: '请选择转让用户',
						icon: 'none'
					})
					return
				}
				uni.showLoading({})
				this.$http.returnorder({
					orderid: this.orderId,
					userid: this.currentId
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code == 0) {
						this.$refs.recash2.close()
						this.loadAll = false;
						this.riderOrderList = [];
						this.page = 1;
						this.getRiderOrderList();
					}
				})
			},
			//导航
			navigation(item) {

				// var o = {
				// 	name: item.street_text+item.address,
				// 	location: {
				// 		lat: item.lat,
				// 		lng: item.lon,
				// 	}
				// };
				// uni.navigateToMiniProgram({
				// 	appId: 'wx7643d5f831302ab0',
				// 	path:"pages/multiScheme/multiScheme?endLoc=" + JSON.stringify(o) + "&qbMode=0",
				// 	success(res) {
				// 		// 打开成功
				// 	}
				// })

				wx.openLocation({ //​使用微信内置地图查看位置。
					type: 'gcj02', //返回可以用于wx.openLocation的经纬度
					latitude: parseFloat(item.lat), //要去的纬度-地址
					longitude: parseFloat(item.lon), //要去的经度-地址
					name: item.street_text + item.address,
				})

				// console.log('导航')
				// let plugin = requirePlugin('routePlan')
				// let key = uni.getStorageSync('mapKey')?uni.getStorageSync('mapKey'):'PBMBZ-NWPW3-6GJ3P-YPKQ7-4IED5-5PBF4'
				// let referer = '花呗回收'
				// let endPoint = JSON.stringify({
				// 	'name':'目的地',
				// 	'latitude':item.lat,
				// 	'longitude':item.lon
				// })
				// uni.navigateTo({
				// 	url:'plugin://routePlan/index?key='+ key + '&referer='+referer +'&endPoint='+endPoint
				// })
			},
			changeStatus(status) {
				this.$http.getstatus({
					status: status
				}).then(res => {
					console.log(res)
					if (res.code == 0) {
						this.riderInfo.status = status
						setTimeout(() => {
							this.getRiderInfo()
						}, 500)
					}
				})
			},

			//订单大厅
			getRiderOrderList() {
				this.$http.rider_order_list({
					status: this.current + 1,
					page: this.page
				}).then(res => {
					uni.stopPullDownRefresh()
					uni.hideLoading({})
					if (res.code == 0) {
						let _list = res.data.data
						let totalPage = res.data.last_page
						if (this.page > totalPage || _list.length == 0) {
							this.loadAll = true
							return
						}
						if (_list.length > 0) {
							this.riderOrderList = this.riderOrderList.concat(_list);
						}
						this.page++;
					}
				})
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
					this.loadAll = false;
					this.riderOrderList = [];
					this.page = 1;
					uni.showLoading({})
					this.getRiderOrderList();
				}
			},
			show() {
				this.$refs.popupRef.show(); // 或者 boolShow = rue
			},
			closeRecash() {
				this.$refs.recash.close()
			},
			open(id) {
				this.orderId = id
				this.$refs.recash.open()
			},
			//确认抢单
			confirmOrder() {
				uni.showLoading({})
				this.$http.orders({
					id: this.orderId
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code == 0) {
						this.$refs.recash.close()
						this.current = 1
						this.loadAll = false;
						this.riderOrderList = [];
						this.page = 1;
						this.getRiderOrderList();
					}
				})
			},
			//转单
			open2(id) {
				this.orderId = id
				this.$refs.recash2.open()
			},
			//取消转单
			cancelTransfer() {
				this.$refs.recash2.close()
			},
			//街道管理
			hanldRow() {
				uni.navigateTo({
					url: '/pages/member/horseman/row'
				})
			},
			//订单详情
			hanldOrderInfo(id) {
				//订单大厅不能查看详情
				// if(this.current !== 0){
				uni.navigateTo({
					url: 'orderInfo?id=' + id
				})
				// }
			},
			//我的统计
			hanldStats() {
				uni.navigateTo({
					url: '/pages/member/horseman/myStats'
				})
			},
			//通知中心
			hanldCenter() {
				uni.navigateTo({
					url: '/pages/member/horseman/noticeCenter'
				})
			},
			//设置中心
			hanldsetCenter() {
				uni.navigateTo({
					url: 'setCenter'
				})
			},
			//在线学习
			hanldStudy() {
				uni.navigateTo({
					url: 'study'
				})
			},
			//问题反馈
			hanldIdea() {
				uni.navigateTo({
					url: 'manIdea'
				})
			},
			//协议
			hanldRule() {
				uni.navigateTo({
					url: 'rule'
				})
			},
			radioChange: function(evt) {
				this.currentId = evt.detail.value
			}
		}
	}
</script>

<style scoped>
	.man-index {
		width: 100%;
		background-color: #FAFAFA;
		height: 100%;
	}

	.man-index>>>.zzx-tabs .zzx-tabs-bar .zzx-bottom-line {
		background-color: #FF6001;
	}

	.man-index>>>.zzx-tabs .zzx-tabs-wrap .item-title {}

	.man-index>>>.popup-content {
		width: 546upx;
		min-height: 100vh;
		padding: 10px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
	}

	.man-header {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		background-color: #FFFFFF;
		position: fixed;
		width: 100%;

		z-index: 999999999;
		padding: 10px 0;
	}

	.man-tab {
		width: 70%;
	}

	.man-but {
		width: 180upx;
		height: 60upx;
		background-color: #2B2A29;
		border-radius: 30upx;
		text-align: center;
		line-height: 60upx;
		color: #FFFFFF;
		font-size: 14px;
		margin: auto;
	}

	.man-wrapper {
		background-color: #FFFFFF;
	}

	.man-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #E5E5E5;
		padding: 14px 0px;
	}

	.item-header {
		width: 80%;
	}

	.item-right {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 20%;
		justify-content: flex-end;
	}

	.item-right image {
		width: 24px;
		height: 24px;
		vertical-align: middle;
	}

	.item-add {
		color: #242424;
		font-size: 14px;
		font-weight: bold;
	}

	.right-text {
		color: #FF6001;
		font-size: 15px;
		font-weight: bold;
		margin-left: 6px;
	}

	..weight {
		padding: 15px 0 10px 0;
		display: flex;
		flex-wrap: wrap;
	}

	.weight-item {
		color: #242424;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-bottom: 5px;
	}

	.weight-item-img {
		flex-direction: row;
		align-items: center;
	}

	.weight-item-img image {
		width: 25px;
		height: 25px;
		vertical-align: middle;
	}

	.weight-text {
		padding: 0 4px;
		color: #242424;
		font-size: 15px;
		font-weight: bold;
	}

	.weight-gj {
		padding: 4px;
		color: #242424;
		font-weight: bold;
	}

	.weight-tiem {
		color: #242424;
		font-size: 18px;
		font-weight: bold;
		padding-top: 10px;
	}

	.weight-but {
		width: 100%;
		height: 108upx;
		
		background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
		box-shadow: 0px 4upx 8upx 0px #FFAB71;
		font-size: 18px;
		color: #fff;
		text-align: center;
		line-height: 108upx;
		margin: 12px 0;
	}

	.but-con {
		display: flex;
		flex-direction: row;
		width: 208upx;
		height: 60upx;
		border-radius: 30upx;
		border: 1px solid rgba(52, 54, 51, 1);
		font-size: 14px;
		color: #242424;
		text-align: center;
		line-height: 60upx;
		align-items: center;
		justify-content: center;
	}

	.but-ok {
		display: flex;
		flex-direction: row;
		width: 240upx;
		height: 80upx;
	
	background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
	box-shadow: 0px 4upx 8upx 0px #FFAB71;
		border-radius: 48upx;
		font-size: 18px;
		color: #FFFFFF;
		text-align: center;
		line-height: 80upx;
		align-items: center;
		justify-content: center;
	}

	.but-con image {
		width: 16px;
		height: 16px;
	}

	.con-text {
		padding-left: 4px;
	}

	.but-wrapper {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: end;
		-webkit-justify-content: flex-end;
		justify-content: space-between;
		padding: 6px 15px 10px 15px;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		margin-bottom: 18px;
	}

	/**/
	.pop-body {
		/* width: 100%;
		min-height: 100vh;
		padding: 20rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0; */
	}

	.box {
		/*  #ifdef H5 */
		padding-top: 240upx;
		/*  #endif  */

		/*  #ifdef MP-WEIXIN */
		padding-top: 140upx;
		/*  #endif  */
	}

	.box-header {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 36px;
	}

	.box-img {
		width: 51px;
		height: 51px;
		border-radius: 50%;
	}

	.box-user {
		padding: 0 14px;
	}

	.user-name {
		font-size: 18px;
		font-weight: bold;
	}

	.user-num {
		font-size: 14px;
	}

	.box-stus {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		padding: 50upx 40upx 34upx 40upx;
	}

	.stus-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.stus-item image {
		width: 21px;
		height: 21px;
	}

	.stus-text {
		color: #030303;
		font-weight: bold;
		padding: 5px 0;
	}

	.box-list {
		display: flex;
		flex-direction: column;
		overflow: scroll;
		height: 800upx;
	}

	.list-item:nth-of-type(1) {
		border-top: 1px solid #E5EBF1;
	}

	.list-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin: 0 11px;
		border-bottom: 1px solid #E5EBF1;
		padding: 11px 6px 11px 14px;
	}

	.list-item-text {
		color: #030303;
		font-weight: bold;
		font-size: 16px;
	}

	.list-item-img {
		width: 27px;
		height: 27px;
	}

	/**/
	.cash {
		height: 226px;
		width: 548upx;
		background-color: #fff;
		border-radius: 10px;
		text-align: center;
		padding: 0 25px;
		position: relative;
		border: 4upx solid #FF6000;
	}

	.cash-but {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-top: 50px;
	}

	.cash-title {
		color: rgba(48, 52, 76, 1);
		font-weight: bold;
		font-size: 23px;
		padding: 20px 0;
	}

	.cash-text {
		color: #666666;
		text-align: left;
		font-size: 14px;
	}

	.cash-left {
		width: 555upx;
		height: 88upx;
	
	background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
	box-shadow: 0px 4upx 8upx 0px #FFAB71;
		border-radius: 48upx;
		text-align: center;
		line-height: 88upx;
		color: #fff;
		font-size: 18px;
		font-weight: bold;
	}

	.cash-right {
		width: 228upx;
		height: 34px;
		background: rgba(255, 95, 73, 1);
		border-radius: 5px;
		color: #fff;
		font-size: 14px;
		line-height: 34px;
	}

	.cash-img {
		width: 54px;
		height: 54px;
		margin-top: -54upx;
	}

	.cash-guan {
		width: 21px;
		height: 21px;
		position: absolute;
		right: 20px;
		top: 20px;
	}

	/*转单*/
	.cash2 {
		height: 778upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 25px 25px 0px 0;
	}

	.cash-but3 {
		display: flex;
		flex-direction: row;
		position: fixed;
		bottom: 0;
		justify-content: space-between;
		width: 100%;
	}

	.but-left3 {
		background-color: #2B2A29;
		width: 50%;
		height: 48px;
		text-align: center;
		font-size: 16px;
		color: #fff;
		font-weight: bold;
		line-height: 48px;
	}

	.but-right3 {
	
	background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
	box-shadow: 0px 4upx 8upx 0px #FFAB71;
		width: 50%;
		height: 48px;
		text-align: center;
		font-size: 16px;
		color: #fff;
		font-weight: bold;
		line-height: 48px;
	}

	.cash2-input {
		position: relative;
		padding: 22px 15px;
	}

	.cash2-input input {
		height: 92upx;
		background: rgba(187, 187, 187, 0.1);
		border-radius: 10upx;
		padding: 0 100px 0 20px;
	}

	.cash2-but {
		width: 168upx;
		height: 68upx;
		
		background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
		box-shadow: 0px 4upx 8upx 0px #FFAB71;
		border-radius: 48upx;
		color: #FFFFFF;
		font-size: 14px;
		line-height: 68upx;
		text-align: center;
		position: absolute;
		right: 22px;
		top: 28px;
	}

	.man-index>>>.uni-input-placeholder {
		font-size: 12px;
	}

	.cash2-wrapper {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 10px 40px;
	}

	.cash2-text {
		color: #242424;
		font-size: 18px;
		font-weight: bold;
	}

	.cash2-name {
		color: #242424;
		font-size: 16px;
		font-weight: bold;
		padding: 0 10px;
	}

	.cash2-lab {
		display: flex;
		flex-direction: revert;
		align-items: center;
	}

	.cash2-body {
		height: 200px;
		overflow: scroll;
	}
</style>
